<template>
    <div>
        <h2>显示会员信息</h2>
        <span>会员手机号</span>
        <input type="text" v-model="state.phone">
        <input type="button" value="查询" @click="getlist">
        <input type="button" value="导出" @click="ImportFn">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>会员名称</th>
                    <th>会员手机号</th>
                    <th>会员图片</th>
                    <th>会员性别</th>
                    <th>会员创建时间</th>
                    <th>会员积分</th>
                    <th>会员余额</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{ item.memberInfoName }}</td>
                    <td>{{ item.memberInfoPhone }}</td>
                    <td><img :src="'https://localhost:7088'+item.memberPhoto" alt="" style="width:70px;height:70px;"></td>
                    <td>{{ item.memberInfoSex }}</td>
                    <td>{{ moment(item.createDate).format('YYYY-MM-DD HH:mm:ss') }}</td>
                    <td>{{ item.intergral }}</td>
                    <td>{{item.money  }}</td>
                    <td>{{ item.inter }}</td>
                    <td>
                        <input type="button" value="修改积分" @click="uptjifen(item.id)">
                        <input type="button" value="充值" @click="chong(item.id)">
                        <input type="button" value="详情" @click="showxian(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        当前页：{{state.pageindex}} 
        每页显示：{{state.pagesize}}
        总条数：{{totalcount}}
        总页数：{{totalpage}}
        <input type="button" value="首页" @click="gpage('a')">
        <input type="button" value="上一页" @click="gpage('b')">
        <input type="button" value="下一页" @click="gpage('c')">
        <input type="button" value="尾页" @click="gpage('d')">
        <select @change="selchange">
            <option value="1">==1==</option>
            <option value="3">==3==</option>
            <option value="5">==5==</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios  from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

const data:any = reactive({
    state:{
        phone:'',
        pageindex:1,
        pagesize:2
    },
    list:[],
    totalcount:0,
    totalpage:0
})
const {state,list,totalcount,totalpage} = toRefs(data);

//分页
const gpage = (str:any)=>{
    switch(str)
    {
        case 'a':
            state.value.pageindex=1;
            console.log('首页');
            break;
        case 'b':
            if(state.value.pageindex>=totalpage.value)
            {
                alert('开始翻页');
                return;
            }
        state.value.pageindex--;
        console.log('上一页');
            break;
        case 'c':
        if(state.value.pageindex==totalpage.value)
            {
                alert('到底了');
                return;
            }
        state.value.pageindex++;
        console.log('下一页');
            break;
        case 'd':
        if(state.value.pageindex==totalpage.value)
            {
                alert('尾页');
                return;
            }
        state.value.pageindex=totalpage.value;
        console.log('尾页');
            break;
    }
    getlist();
}

const selchange = (e:any)=>{
    state.value.pagesize=e.target.value;
    getlist();
}


onMounted(()=>{
    getlist();
})
//显示
const getlist = ()=>{
    axios({
        url:'/api/Member/ShowMember',
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res);
        list.value=res.data.data;
        totalcount.value=res.data.totalcount;
        totalpage.value=res.data.totalpage;
    })
    .catch(err=>{
        console.log(err);
    })
    
}

//导出数据
const ImportFn=()=>{
    location.href="https://localhost:7088/api/Member/ExcelDaochu";
}

//修改积分页面
const uptjifen = (id:any)=>{
    router.push({
        path:'/Intergralview',
        query:{
            id:id
        }
    })
}

//充值页面
const chong = (id:any)=>{
    router.push({
        path:'/ChatView',
        query:{
            id:id
        }
    })
}

//详情页
const showxian = (id:any)=>{
    router.push({
        path:'/MemberView',
        query:{
            id:id
        }
    })
}
</script>

<style scoped>

</style>